<template>
  <!-- 在视图模板上，可直接使用 props 中的属性 -->
  <button :class="{ error, flat }" @click="showPropsData" @mousedown.right="changeErrorProps">
    {{ title }}
  </button>
</template>

<script>
export default {
  props: ['flat', 'title', 'error'], // 在 props 选项里使用字符串数组的形式来声明自定义的属性
  methods: {
    showPropsData() {
      // 在选项式 API 的 JS 代码中，通过 this.$props 来访问 props 的内容
      console.log(this.$props)
      console.log(this.$props.title)
      console.log(this.$props.error)
      console.log(this.$props.flat)
    },
    changeErrorProps() {
      // 不能直接修改 props 的数据，因为是只读的
      this.$props.error = !this.$props.error
    },
  },
}
</script>

<script setup>
// 声明接收父组件传递的属性值：自定义属性
let propsData = defineProps(['title', 'error', 'flat'])

function showPropsData() {
  // 在 JS 中，需要通过 defineProps 返回对象来访问 props 的内容
  console.log(propsData)
  console.log(propsData.title)
  console.log(propsData.error)
  console.log(propsData.flat)
}

function changeErrorProps() {
  // propsData.error = !propsData.error  // 不能直接修改 props 的数据，因为是只读的
}
</script>

<style scoped>
button {
  border: none;
  padding: 12px 25px;
}

.error {
  background-color: rgb(197, 75, 75);
  color: white;
}

.flat {
  box-shadow: 0 0 10px grey;
}
</style>
